<template>
  <!--面包屑导航-->
  <Breadcrumb>
    <template #firstTitle>
      <span>商品管理</span>
    </template>
    <template #secondTitle>
      <span>商品列表</span>
    </template>
  </Breadcrumb>

  <!--卡片视图-->
  <el-card>
    <!--搜索与添加-->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input
          placeholder="请输入内容"
          clearable
          v-model="queryInfo.query"
          @clear="getListData"
        >
          <template #append>
            <el-button :icon="Search" @click="getListData"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="handleAdd">添加商品</el-button>
      </el-col>
    </el-row>
    <!--商品列表-->
    <el-table border stripe :data="goodsList" v-loading="loading">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="goods_name" label="商品名称"></el-table-column>
      <el-table-column
        prop="goods_price"
        label="商品价格（元）"
        width="95px"
      ></el-table-column>
      <el-table-column
        prop="goods_weight"
        label="商品重量"
        width="75px"
      ></el-table-column>
      <el-table-column prop="add_time" label="创建时间" width="200px">
        <template #default="scope">
          {{ $filters.dateFormat(scope.row.add_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140px">
        <template #default="scope">
          <!--编辑按钮-->
          <el-button type="primary" size="small" @click="handleEdit(scope.row.goods_id)">编辑</el-button>
          <!--删除按钮-->
          <el-button type="danger" size="small" @click="handleDelete(scope.row.goods_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </el-card>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getGoods, deleteGoods } from "@/api/goods.js";
import { useRouter } from "vue-router";

const router = useRouter();
const goodsList = ref([]); // 列表数据
const loading = ref(false);
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  pagenum: 1, // 当前的页数
  pagesize: 10, // 当前每页显示多少条数据
});
const total = ref(0); // 总条数

onMounted(() => {
  getListData();
});

// 查询列表
const getListData = async () => {
  loading.value = true;
  const data = await getGoods(queryInfo).finally(() => {
    loading.value = false;
  });

  goodsList.value = data.goods;
  total.value = data.total;
};

// 监听pageSize改变
const handleSizeChange = (newSize) => {
  queryInfo.pagesize = newSize;
  getListData();
};

// 监听页码值的改变
const handleCurrentChange = (newPage) => {
  queryInfo.pagenum = newPage;
  getListData();
};

// 跳转添加商品
const handleAdd = () => {
  router.push("/goods/add");
};

// 跳转编辑商品
const handleEdit = (id) => {
  router.push({ path: `/goods/edit/${id}` });
};

// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("此操作将永久删除该商品数据, 是否继续?", "删除商品信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await deleteGoods(id);
    ElMessage.success("删除成功");
    getListData();
  });
};
</script>

<style lang="scss" scoped></style>
